上一篇介紹套用CSS的方法，最常用的是另外建立css檔並引入html檔。那麼我們要怎麼在css檔內寫入我們想要的樣式呢？

首先我們會介紹css的語法，接著本篇的重點在於selector(選擇器)。選擇器是CSS用來指定HTML的元素—指定特定的樣式要用在哪些元素上。

先來了解CSS的語法吧！

下圖是CSS的語法，通常這樣子排列，比較好讀。

語法解說：

• 用選擇器去指定要套樣式的元素
• 用大括號包住樣式聲明，大括號內可寫多行樣式。
• 樣式聲明：
  • property屬性，用屬性來指定你要改變元素的什麼性值，像是背景、字體、字的大小、顏色等樣式。
  • value值，指定該屬性的對應值，像顏色屬性的值，就會是色碼 ; 字體大小屬性的值，就是賦予各種單位的數值。
  • 每個樣式的聲明都要用分號結尾，用來區隔每一行聲明。
• 結果：
  

另外還有@規則，透過開頭為＠的語法，可以匯入字碼設定（＠charset）、媒體訊息（＠media）、其它樣式表等（像上一篇講到的@import就是）。

CSS的語法重點就這樣，CSS主要就是用選擇器跟樣式聲明堆疊起來的，當聲明越寫越多個時候，語法的排版就很重要，第一張圖就是普遍大家寫CSS code時會用的排版方式。

CSS selector（選擇器）

任何元素選擇符*

• *米字號可以選到所有的元素(也可以說是選到所有的節點)。試著指定這個html檔的所有元素，並給予底線樣式。

    <h1>暑假計畫</h1>
  
    <h2>研究西拉雅歷史</h2>
    <ul>
      <li>找部落資料</li>
      <li>成立圖書會</li>
      <li>擬訪談搞</li>
    </ul>
  
    <h2>考救生員執照</h2>
    <ol>
      <li>報名救生員暑期班</li>
      <li>買競速泳衣</li>
    </ol>
  

• 再用任何元素選擇符，選擇所有元素，並聲明底線樣式：

    * {
        text-decoration: underline;
    }
  

• 所有的元素（h1、h2、ul內的li、ol內的li）的字都有了底線：

  

element selector（元素選擇器）

• 在css檔內指定要套樣式的元素名稱，例如：

    h2 {
        background-color: lightblue;
    }
  

• 結果

  

class selector（類別選擇器）

class選擇器，只想要指定某個、或某些特定的元素時的用法，它對應html檔元素內的class屬性值，在CSS裡，class的選擇符為" . "，一個簡單的點(dot)。

HTML的class屬性可以指定多個，每個屬性值用" "空格來區別，例如我們幫一個元素寫入三個class值：

<p class="one two three">
	我是一個段落
</p>

class的命名很重要，上面那樣命名是不好的示範，我們將會在之後介紹。

• 設定html的class屬性值，比如我們這個計畫列表中，"成立圖書會"跟"報名救生員暑期班"是需要優先處理的事，我們就用class屬性把它特殊化出來：

    <h1>暑假計畫</h1>
  
    <h2>研究西拉雅歷史</h2>
    <ul>
      <li>找部落資料</li>
      <li class="top_priority">成立圖書會</li>
      <li>擬訪談搞</li>
    </ul>
  
    <h2>考救生員執照</h2>
    <ol>
      <li class="top_priority">報名救生員暑期班</li>
      <li>買競速泳衣</li>
    </ol>
  

• 然後在css檔內用class選擇符" . "加上class的值"top_priority"，聲明大紅色的背景跟白色的字：

    .top_priority {
      background-color: red;
      color: white;
    }
  

• 結果

  

ID selector（ID選擇器）

CSS的ID選擇符為" # "，後面加上HTML的ID屬性值，想要指定單一元素的樣式，就可以用到ID，ID屬性值在同一個html文檔內不得重複，它就像人的身份證字號一樣，是獨一無二的。

• 比方我們這個 todo list裡，必須選出唯一一個必須做的是，是最重要的。那麼我們可以用ID屬定來指定它：

    <h1>暑假計畫</h1>
  
    <h2>研究西拉雅歷史</h2>
    <ul>
      <li>找部落資料</li>
      <li id="must_do">成立圖書會</li>
      <li>擬訪談搞</li>
    </ul>
  
    <h2>考救生員執照</h2>
    <ol>
      <li>報名救生員暑期班</li>
      <li>買競速泳衣</li>
    </ol>
  

• 接著，在css檔裡用ID選擇符" # "，選擇id值為"must_do"的元素：

    #must_do {
    	font-weight: bolder;
    	font-size: 23px;
    	background-color: yellow;
    }
  

• 結果

  

選擇器的大小寫區分

元素選擇器不區分大小寫，例如h1跟H1效果會是一樣的。但是在選擇器控制範圍外的語法就可能會有大小寫區分，比方屬性值就有區分大小寫，像class跟ID的屬性值是區分大小寫的，如果html中屬性class="warning"，選擇器內的class值打成Warning就無效，還是要小心使用哦！

今天的筆記告一段落，下一篇也是講選擇器，明天見囉～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。